<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        #commit_table>span{
            display: inline-block;
            margin: 15px 25px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-card style="width: 1250px;height: 700px;margin: 0 auto;margin: 20px">
        <el-form :inline="true" ref="form" :model="form" label-width="80px">
            <el-form-item label="申报年度:" size="">
                <el-date-picker
                        v-model="form.reportYear"
                        type="year"
                        placeholder="选择年">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="项目运营单位:"  label-width="100px">
                <el-input :span="15" v-model="form.projectUnit" placeholder="请输入项目运营单位"></el-input>
            </el-form-item>
            <el-form-item label="审核状态:">
                <el-select v-model="form.reportState">
                    <el-option label="待审核" value="待审核"></el-option>
                    <el-option label="审核通过" value="审核通过"></el-option>
                    <el-option label="审核失败" value="审核失败"></el-option>
                </el-select>
            </el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="selectByYear()">查询</el-button>
            <el-button type="primary" icon="el-icon-refresh-right" @click="clear()">重置</el-button>
            <el-button @click="drawer = true" icon="el-icon-plus" type="primary" >
                新增
            </el-button>
            <el-drawer
                    title="新增"
                    size="800px"
                    :visible.sync="drawer"
                    :with-header="false"
            >

                <span style="display:block;line-height: 25px;font-size: 15px; margin:10px 20px">新增</span>
                <hr>
                <div style="margin-left: 20px; ">

                    <center>
                        <span style="font-size: 20px; font-weight: bold; ">山西省体育产业示范项目申报</span>
                    </center>
                    <br>
                    <template >
                        <el-tabs v-model="activeName" @tab-click="handleClick" >
                            <el-tab-pane label="示范项目申报表" name="first" >
                                <div id="commit_table">
                                    <span class="demonstration" >申报年份:</span>
                                    <el-date-picker
                                            v-model="report.reportYear"
                                            type="year"
                                            placeholder="选择年份">
                                    </el-date-picker>
                                    <span class="demonstration" style="margin-left: 30px">申报类型:</span>
                                    <el-select v-model="report.reportType" placeholder="请选择">
                                        <el-option  v-for="item in options"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                        </el-option>
                                    </el-select><br>
                                    <span>申报项目全称:</span><el-input placeholder="请输入申报项目全称" v-model="report.reportProject" style="width: 500px"></el-input><br>
                                    <span>申报单位:</span><el-input placeholder="请输入项目运营单位" v-model="report.projectUnit" style="width: 500px"></el-input><br>
                                    <span>机构代码:</span><el-input placeholder="请输入机构代码 " v-model="report.orgCode" style="width: 250px"></el-input>
                                    <span>法人代表:</span><el-input placeholder="请输入法人代表" v-model="report.lawPerson" style="width: 250px"></el-input>
                                    <br>
                                    <span>联系人:</span><el-input placeholder="请输入联系人" v-model="report.linkPerson" style="width: 250px"></el-input>
                                    <span>职位:</span><el-input placeholder="请输入职位" v-model="report.job" style="width: 250px"></el-input><br>
                                    <span>电话:</span><el-input placeholder="请输入电话" v-model="report.tel" style="width: 250px"></el-input>
                                    <span>传真:</span><el-input placeholder="请输入传真" v-model="report.fax" style="width: 250px"><br></el-input><br>
                                    <span>申子邮箱:</span><el-input placeholder="请输入电子邮箱" v-model="report.email" style="width: 250px"></el-input>
                                    <span>邮政编码:</span><el-input placeholder="请输入邮政编码" v-model="report.zipCode" style="width: 250px"></el-input><br>
                                    <span>联系地址:</span><el-input placeholder="请输入联系地址" v-model="report.address" style="width: 500px"></el-input>
                                    <br><center>
                                    <br>
                                    <el-button type="primary" @click="report1()">提交申报</el-button>
                                </center>
                                </div>

                            </el-tab-pane>
                            <el-tab-pane label="资质与基本情况" name="second">资质与基本情况</el-tab-pane>
                            <el-tab-pane label="经济社会效益与声明" name="third">经济社会效益与声明</el-tab-pane>
                            <el-tab-pane label="管理经营与规划" name="fourth">管理经营与规划</el-tab-pane>
                        </el-tabs>
                    </template>
                </div>


            </el-drawer>
        </el-form>
        <div style="border:1px solid #409eff;background-color: rgba(64,158,255,0.1);margin:20px 10px;padding:12px 30px;color:#606266;border-radius: 5px;">
            已选择<a style="text-decoration: none;color:#409eff" href="javascript:void(0)">{{n}}</a>项
            <span style=" font-size: 15px; margin-left: 30px" >
                    <a style="text-decoration: none;color:#409eff" href="javascript:void(0)" @click="clearT()">清空</a>
            </span>
        </div>
        <template>
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%;"
                    height="500"
                    border="1"
                    @selection-change="selecteed"
                    @selection-change="handleSelectionChange">

                <el-table-column
                        type="selection"
                        width="40">
                </el-table-column>

                <el-table-column
                        prop="reportYear"
                        label="申报年度"
                        width="77">
                </el-table-column>
                <el-table-column
                        prop="reportType"
                        label="申报类型"
                        width="77">
                </el-table-column>
                <el-table-column
                        prop="reportProject"
                        label="申报项目全称"
                        width="105">
                </el-table-column>
                <el-table-column
                        prop="projectUnit"
                        label="项目运营单位"
                        width="105">
                </el-table-column>
                <el-table-column
                        prop="orgCode"
                        label="机构代码"
                        width="77">
                </el-table-column>
                <el-table-column
                        prop="lawPerson"
                        label="法人代表"
                        width="77">
                </el-table-column>
                <el-table-column
                        prop="linkPerson"
                        label="联系人"
                        width="65">
                </el-table-column>
                <el-table-column
                        prop="job"
                        label="职务"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="tel"
                        label="电话"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="fax"
                        label="传真"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="电子邮箱"
                        width="77">
                </el-table-column>
                <el-table-column
                        prop="zipCode"
                        label="邮政编码"
                        width="77">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="联系地址"
                        width="77">
                </el-table-column>
                <el-table-column
                        prop="reportState"
                        label="审核状态"
                        width="77">
                </el-table-column>

                <el-table-column
                        align="center"
                        label="操作"
                        width="103">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

    </el-card>
</div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                n:0,
                form: {
                    reportYear: '',
                    projectUnit: '',
                    reportState: ''
                },

                tableData: [],
                drawer: false,
                activeName: 'first',
                options: [{
                    value: '项目申报',
                    label: '项目申报'
                },{
                    value: '单位申报',
                    label: '单位申报'
                },{
                    value: '基地申报',
                    label: '基地申报'
                }],
                report:{}

            }
        },
        methods: {
            selecteed(selections){
                v.n=selections.length
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            clearT(){
                this.$refs.multipleTable.clearSelection();
            },
            selectByYear(){
                if(v.form.reportYear==""||v.form.projectUnit==""||v.form.reportState==""){
                    this.$message("查询内容不能为空!");
                    return;
                }
                axios.post("/project/selectByYear",v.form).then(function (response) {
                    v.tableData=response.data;
                })
            },
            clear(){
                v.form={};
                axios.get("/project/select").then(function (response) {
                    v.tableData = response.data;
                })
            },
            handleDelete(index, row) {
                if(confirm("您确定删除吗?")){
                    axios.get("/project/deleteById?id="+row.id).then(function (response) {
                        v.tableData.splice(index,1);
                    })
                }
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            report1(){
                axios.post("/project/insert",v.report).then(function (response) {
                    alert("提交成功")
                    location.reload()
                })
            }
        },
        created:function () {
            axios.get("/project/select").then(function (response) {
                v.tableData = response.data;
            })
        }

    })
</script>
</html>



